<template>
  <div id="mycenter">
    <p @click="fun()">
      我的订单 <span>查看全部订单></span>
    </p>
    <hr>
    <ul>
      <li id="one" @click="fun()">
        
      </li>
      <li  id="two" @click="funtwo()">
         <!-- tupian <br>
        待发货 -->
      </li>
      <li id="three" @click="funthree()">
         <!-- tupian <br>
        待收货 -->
      </li>
      <li id="four" @click="funfour()">
         <!-- tupian <br>
        待评价 -->
      </li>
      <li id="five" @click="funfive()">
         <!-- tupian <br>
        退款售后 -->
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  methods:{
fun(){
     this.$router.push("Zdaifukuan")
    }
    
 ,    
  
funtwo(){
   this.$router.push("Zdaifahuo")
     
    }
    
,
funthree(){
  this.$router.push("Zdaishouhuo")
    }
    
,
funfour(){
     this.$router.push("Zdaipingjia")
    },
    
 
funfive(){
     this.$router.push("Zdaituikuan")
    },
  }
};
</script>

<style  scoped>
#mycenter{
  margin-top: 0.2rem;
  width: 100%;
  background-color:white;
  box-sizing: border-box;
   padding: 0rem 0.1rem 0rem 0.1rem;
}
#mycenter p{
  font-size: 0.2rem;
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
}
#mycenter p span{
  float: right;
font-size: 0.15rem;
}
#mycenter ul{
  display:flex;
  justify-content: space-between;
  height: 0.5rem;
 font-size: 0.15rem;
 line-height: 0.5rem;
 
}
#mycenter ul li{
width: 0.5rem;
height: 0.5rem;
background-size: 0.3rem;
background-position: 0.1rem;


}


#one{
  background: url("../../../public/my/daifukuan.png")no-repeat;

}
#two{
  background:url("../../../public/my/fahuoxinxi.png")no-repeat;
}

#three{
  background: url("../../../public/my/daifahuo.png")no-repeat; 
} 
#four{
  background: url("../../../public/my/daipingjia.png")no-repeat; 
}   
#five{
  background: url("../../../public/my/refund.png")no-repeat; 
}
</style>
